<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :conditionBtnRow="true"
      :config="dataConfig()"
      :columns="columnsVxe"
      :formItem="formItem"
      @checkboxChange="checkboxChange"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:ksTime_slot>
        <a-date-picker
          format="YYYY-MM-DD"
          placeholder="请选择开始日期"
          @change="fksChange"
          v-model:value="fqjkssj"
          class="form-item-div"/>
      </template>
      <template v-slot:jsTime_slot>
        <a-date-picker
          format="YYYY-MM-DD"
          placeholder="请选择结束日期"
          @change="fjsChange"
          v-model:value="fqjjssj"
          class="form-item-div"/>
      </template>
      <template v-slot:externalOperations="{data}"  >
        <vxe-form-item>
          <template>
            <a-button v-if="linkName == '请休假统计'" class="blue-btn" @click="exportClick">导出</a-button>
          </template>
        </vxe-form-item>
      </template>
      <template v-slot:time1_btn="{row}" data-desc="请假开始时间">
        <span>
          {{ row.fqjkssj +' '+ row.fqjksxs }}
        </span>
      </template>
      <template v-slot:time2_btn="{row}" data-desc="请假结束时间">
        <span>
          {{ row.fqjjssj +' '+ row.fqjjsxs }}
        </span>
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
          <a-form-item>
              <a-button class="blue-btn" type="primary" @click="reviseClick(row)">查看</a-button>
          </a-form-item>
          <a-form-item>
              <a-button
                v-if="linkName=='我的已办'&&row.fhjmc=='科室审批'&&row.fblzt=='待办'"
                class="red-btn" type="primary" @click="returnClick(row)">
                撤回
              </a-button>
          </a-form-item>
          <a-form-item>
          </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <applicationForm ref="applicationForm" :linkName="linkName" :formData="formData" @success="success"></applicationForm>
  </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import {queryJobByJobId} from '../index/service/index'
import {queryAllYbJob,returnUpperzdyFlowJob,exportqxjData,} from './service/index'
import applicationForm from '../index/applicationForm'
export default {
  components: {
    commpVxeTable,
    applicationForm
  },
  props:{
    linkName:{
      type:String,
      default:'',
      required:false,
    },
    stepNum:{
      type:String,
      default:'',
      required:false,
    }
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet: {}
      },
      dataTableConfigMe: {
        api: assessCheckApi.myJobPage,
        rowId: 'id',
        urlType: true,
        paramet: {}
      },
      dataTableConfigJk: {
        api: assessCheckApi.flowJkPage,
        rowId: 'id',
        urlType: true,
        paramet: {}
      },
      dataTableConfigXiu: {
        api: assessCheckApi.Pagesjxd,
        rowId: 'id',
        urlType: true,
        paramet: {}
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
        //   fixed: 'left'
        },{
          title: '姓名',
          field: 'fxm',
          width: 100
        },{
          title: '原因',
          field: 'fyy',
        },{
          title: '请假开始时间',
          field: 'fqjkssj',
          width: 150,
          slots: {
            default: 'time1_btn',
          },
        },{
          title: '请假结束时间',
          field: 'fqjjssj',
          width: 150,
          slots: {
            default: 'time2_btn',
          },
        },{
          title: '天数',
          field: 'fts',
          width: 50
        },{
          title: '请假类型',
          field: 'fqjlx',
          width: 100,
        },{
          title: '是否离市',
          field: 'fsflkbgzdszcs',
          width: 100,
        },
        // {
        //   title: '离市日期',
        //   field: 'flkrq',
        //   width: 100
        // },{
        //   title: '返市日期',
        //   field: 'ffhrq',
        //   width: 100
        // },
        {
          title: '环节名称',
          field: 'fhjmc',
          width: 100
        },{
          title: '流程状态',
          field: 'flczt',
          width: 100
        },{
          title: '操作',
          field: 'jobid',
          width:200,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '姓名',
          model: 'fxm',
        },{
          label: '原因',
          model: 'fyy',
        },{
          label: '请假开始时间',
          model: 'fqjkssj',
          slotName:'ksTime_slot'
        },{
          label: '请假结束时间',
          model: 'fqjjssj',
          slotName:'jsTime_slot'
        },{
          label: '天数',
          model: 'fts',
        },{
          label: '请假类型',
          model: 'fqjlx',
          placeholder: 'OA请休假类型',
          type:'Select',
          dictionaryType:'OA请休假类型'
        },{
          label: '是否离市',
          model: 'fsflkbgzdszcs',
          type:'Select',
          options:[{
            label: '是',
            value: '是'
          },{
            label: '否',
            value: '否'
          }]
        },{
          label: '流程状态',
          model: 'flczt',
          type:'Select',
          options:[{
            label: '流程在办',
            value: '流程在办'
          },{
            label: '流程结束',
            value: '流程结束'
          }]
        },
      ],
      idList: [],
      formData: {},
      parametMe: {},
      parametJk: {},
      parametXiu: {},
      fqjkssj: '',
      fqjjssj: '',
      stepNums: 0,
    }
  },
  created() {
    this.stepNums = Number(this.stepNum)
    this.paramet = JSON.parse(JSON.stringify(this.dataTableConfig.paramet))
    this.parametMe = JSON.parse(JSON.stringify(this.dataTableConfigMe.paramet))
    this.parametJk = JSON.parse(JSON.stringify(this.dataTableConfigJk.paramet))
    this.parametXiu = JSON.parse(JSON.stringify(this.dataTableConfigXiu.paramet))
  },
  methods: {
    dataConfig(){
      let data = {}
      if(this.linkName == '我的已办'){
        data = this.dataTableConfigMe
      } else if (this.linkName == '流程监控'){
        data = this.dataTableConfigJk
      } else if (this.linkName == '请休假统计'){
        data = this.dataTableConfig
      } else if(this.linkName == '数据修订'){
        data = this.dataTableConfigXiu
      }
      return data
    },
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      if(this.linkName == '我的已办'){
        this.dataTableConfigMe.paramet = {
          ...this.parametMe,
          fqjkssj: this.fqjkssj,
          fqjjssj: this.fqjjssj
        }
      } else if (this.linkName == '流程监控'){
        this.dataTableConfigJk.paramet = {
          ...this.parametJk,
          fqjkssj: this.fqjkssj,
          fqjjssj: this.fqjjssj
        }
      } else if (this.linkName == '请休假统计'){
        this.dataTableConfig.paramet = {
          ...this.paramet,
          fqjkssj: this.fqjkssj,
          fqjjssj: this.fqjjssj
        }
      } else if(this.linkName == '数据修订'){
        this.dataTableConfigXiu.paramet = {
          ...this.parametXiu,
          fqjkssj: this.fqjkssj,
          fqjjssj: this.fqjjssj
        }
      }
    },
    // 重置
    resetEvent(){
      if(this.linkName == '我的已办'){
        this.dataTableConfigMe.paramet = {
          ...this.parametMe,
        }
      } else if (this.linkName == '流程监控'){
        this.dataTableConfigJk.paramet = {
          ...this.parametJk,
        }
      } else if (this.linkName == '请休假统计'){
        this.dataTableConfig.paramet = {
          ...this.paramet,
        }
      } else if(this.linkName == '数据修订'){
        this.dataTableConfigXiu.paramet = {
          ...this.parametXiu,
        }
      }
      this.fqjkssj = '',
      this.fqjjssj = ''
    },
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.resetEvent()
      this.jobidList = []
    },
    // 点击办理
    reviseClick(row){
      //console.log('办理',row)
      this.formData = {
        ...row
      }
      let jobid = row.jobid
      //console.log(jobid)
      if(row.jobid !== null){
        queryJobByJobId({jobid:jobid}).then(res => {
          if(res.code == 200) {
            this.formData.id = res.result.sqsx.id
          }
        })
      }
      else {
        this.formData.id = this.formData.oaid
      }
      this.$nextTick(_ => {
        this.$refs.applicationForm.applicationFormVisible = true
      })
    },
    // 撤回
    returnClick(row){
      queryAllYbJob({jobid:row.jobid}).then(res => {
        //console.log(res)
        let list = res.result
        list.forEach(item => {
          if(item.fhjmc == '请假申请'){
            this.returnFuntion(row.jobid,item.id)
          }
        })
      })
    },
    returnFuntion(jobid,ids){
      var that = this
      that.$confirm({
        title: '您确定要撤回这条申请吗?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {

          let data = {
            jobid: jobid,
            opinion: '撤回申请',
            shjid: ids,
          }
          returnUpperzdyFlowJob(data).then(res => {
            //console.log(res)
            if(res.code == 200){
              that.reCommpVxeTable = Date.now()
              that.$message.success(res.message)
            } else {
              that.$message.warning(res.message)
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    // 导出
    exportClick(){
      if(this.idList.length == 0){
        this.$message.warning('请勾选导出项')
      } else {
        var that = this
        that.$confirm({
          title: '您确定要导出这些申请吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {

            var fileName = '请休假登记表'
            let data = that.idList.toString()

            exportqxjData({ids:data}).then((data) => {
              if (!data) {
                that.$message.warning('文件下载失败')
                return
              }
              if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
              } else {
                let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName + '.xls')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      }
    },
    // 开始时间
    fksChange(val){
      this.fqjkssj = moment(val).format('YYYY-MM-DD')
    },
    // 结束时间
    fjsChange(val){
      this.fqjjssj = moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>

